﻿<%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="jQuery._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <p id="p1">
        p1</p>
    <p id="p2">
        p2</p>
    <p id="p3">
        p3</p>
    <div id="div1">
        div1</div>
    <div id="div2">
        div2</div>
    <div id="div3" style="display: none; width: 300px; height: 300px">
        this is div3 layer<br />
        this is div3 layer<br />
        this is div3 layer<br />
        this is div3 layer<br />
        this is div3 layer<br />
        this is div3 layer<br />
        this is div3 layer<br />
    </div>
    <input type="button" id="btntest" value="show" />
    <script src="Scripts/jquery-1.6.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btntest").click(function () {
                //获取系统变量
                var windowWidth = document.documentElement.clientWidth;
                var windowHeight = document.documentElement.clientHeight;
                var popupHeight = $("#div3").height();
                var popupWidth = $("#div3").width();

                $("#div3").show();               
                // 居中设置   
                $("#div3").css({
                    "position": "absolute",
                    "top": windowHeight / 2 ,
                    "left": windowWidth / 2 ,
                    color:"red"
                });
            }
            );
        });

    </script>
</asp:Content>
